<template>
  <div class="content">
    <div class="form">
      <el-form size="mini" :inline="true" :rules="rules" :model="form" class="table-info">
        <el-form-item  prop="tableName" label="表">
          <el-select :disabled="true" @change="handleSelectTable" v-model="form.tableName" placeholder="选择表">
            <el-option
              v-for="(item, index) in databaseTables"
              :key="index"
              :label="`${item.realTableName}(${item.desc})`"
              :value="item.realTableName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="oneLevelMenu" label="一级菜单">
          <el-select v-model="form.oneLevelMenu" placeholder="一级菜单">
            <el-option
              v-for="(item, index) in addedMenu"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="twoLevelMenu" label="二级菜单">
          <el-input v-model="form.twoLevelMenu" placeholder="一级菜单"></el-input>
        </el-form-item>
        <el-form-item label="删除功能">
          <el-switch
            v-model="deleteFunction"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="编辑功能">
          <el-switch
            v-model="editFunction"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="添加功能">
          <el-switch
            v-model="addFunction"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-form>
      <el-button-group>
        <el-button @click="clearPicture" size="small" type="waning">清除图片</el-button>
        <el-button @click="freshView" size="small" type="primary">查看预览</el-button>
        <el-button size="small" @click="handleAddMenuView" type="success">添加菜单</el-button>
      </el-button-group>
    </div>

    <div class="list">
      <div class="list_1 list_">
        <h1>列表视图</h1>
        <el-table
          :data="tableData_list_based"
          style="width: 100%"
        >
          <el-table-column
            type="index"
          >
          </el-table-column>
          <el-table-column
            label="属性"
          >
            <template slot-scope="scope">
              {{`${scope.row.name}(${scope.row.desc})`}}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="是否展示"
          >
            <template slot-scope="scope">
              <el-checkbox @change="handleSelectProperty(scope.row)"  v-model="form.list.properties" :label="scope.row.name">是</el-checkbox >
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="属性命名"
          >
            <template slot-scope="scope">
              <el-input :disabled="!form.list.properties.includes(scope.row.name)" v-model="form.list.propertyMap[scope.row.name]"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="是否显示为图片"
          >
            <template slot-scope="scope">
              <el-radio v-model="form.pictureProperty" :label="scope.row.name">是</el-radio>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="是否为模糊匹配项"
          >
            <template slot-scope="scope">
              <el-checkbox  v-model="form.likeProperty" :label="scope.row.name">是</el-checkbox >
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="显示顺序"
          >
            <template slot-scope="scope">
              {{handleListOrder(scope.row.name)}}
            </template>
          </el-table-column>
        </el-table>

      </div>
    </div>
    <div v-show="editFunction || addFunction" class="add list">
      <div class="list_1 list_">
        <h1>添加与修改视图</h1>
        <el-table
          :data="tableData_list"
          style="width: 100%"
        >
          <el-table-column
            type="index"
          >
          </el-table-column>
          <el-table-column
            label="属性"
          >
            <template slot-scope="scope">
              {{`${scope.row.name}(${scope.row.desc})`}}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="是否作为输入项"
          >
            <template slot-scope="scope">
              <el-checkbox @change="handleSelectEditProperty(scope.row)"  v-model="form.edit.properties" :label="scope.row.name">是</el-checkbox >
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="属性命名"
          >
            <template slot-scope="scope">
              <el-input :disabled="!form.edit.properties.includes(scope.row.name)" v-model="form.edit.propertyMap[scope.row.name]"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="表单项"
          >
            <template slot-scope="scope">
              <el-select default-first-option :disabled="!form.edit.properties.includes(scope.row.name)" v-model="form.edit.propertyFromMap[scope.row.name]" :label="scope.row.name">
                <el-option  label="text(文本输入框)" value="text"></el-option>
                <el-option label="textarea(文本域)" value="textarea"></el-option>
                <el-option label="select(下拉框)" value="select"></el-option>
                <el-option label="文件选择" value="upload_1"></el-option>
                <el-option label="图片选择" value="upload_2"></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="是否为必须输入"
          >
            <template slot-scope="scope">
              <el-checkbox :disabled="!form.edit.properties.includes(scope.row.name) || form.edit.propertyFromMap[scope.row.name] === ''" @change="handleSelectMessageProperty(scope.row)"  v-model="form.edit.messageProperties" :label="scope.row.name">是</el-checkbox >
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="未输入时提示信息"
          >
            <template slot-scope="scope">
              <el-input :disabled="!form.edit.messageProperties.includes(scope.row.name)" v-model="form.edit.propertyMessageMap[scope.row.name]"></el-input>
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="显示顺序"
          >
            <template slot-scope="scope">
              {{handleEditOrder(scope.row.name)}}
            </template>
          </el-table-column>

        </el-table>

      </div>
    </div>

    <el-dialog title="预览视图" :visible.sync="dialogTableVisible">
      <el-tabs>
      <el-tab-pane label="列表视图">
        <el-button-group class="buttong">
          <el-button type="primary" icon="el-icon-plus">添加</el-button>
          <el-button v-show="deleteFunction" type="danger" icon="el-icon-delete">删除</el-button>
          <el-button type="warning" icon="el-icon-search">搜索</el-button>
          <el-button icon="el-icon-scissors">清空</el-button>
        </el-button-group>
        <el-form size="mini" :inline="true" class="list_view" >
          <el-form-item v-for="(item, index) in form.likeProperty" :key="index" :label="form.list.propertyMap[item]+ ':'">
            <el-input class="list_view_width"></el-input>
          </el-form-item>
        </el-form>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          stripe
        >
          <el-table-column
            type="selection"
          >
          </el-table-column>
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            v-for="(item, index) in tables"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :formatter="item.formatter"
          >
            <template slot-scope="scope">
              <el-image
                v-if="item.image === 1"
                style="width: 80px; height: 80px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                :fit="'fit'"></el-image>
              <template v-else>
                {{scope.row[item.prop]}}
              </template>

            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            >
            <template slot-scope="scope">
              <el-button-group>
                <el-button v-show="editFunction"
                           type="warning" icon="el-icon-edit"
                           size="mini"
                ></el-button>
                <el-button
                  v-if="deleteFunction"
                  @click="console.log(scope)"
                  type="danger" icon="el-icon-delete"
                  size="mini"
                ></el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="表单视图">
        <div style="width: 400px">
        <el-form label-width="100px" label-position="left">
        <z-from v-for="(item, index) in formView" :key="index" img="img" :form="item" v-model="formViewModel"></z-from>
          <el-form-item>
            <el-button @click="freshView" size="small" type="primary">增加</el-button>
          </el-form-item>
        </el-form>
        </div>
      </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import ZForm from '../../components/form/ZForm'
export default {
  name: 'Add',
  data () {
    return {
      dialogTableVisible: false,
      deleteFunction: true,
      editFunction: true,
      addFunction: true,
      radio: '',
      api: {
        tableList: this.$api.database.tableList,
        add: this.$api.menu.add
      },
      form: null,
      rules: {
        oneLevelMenu: [
          { required: true, message: '请选择一级菜单', trigger: 'change' }
        ],
        twoLevelMenu: [
          { required: true, message: '请输入二级菜单', trigger: 'blur' }
        ],
        tableName: [
          { required: true, message: '请选择表', trigger: 'change' }
        ]
      },
      addedMenu: ['ss'],
      databaseTables: [],
      tableData_list: [],
      tableData: [],
      tables: [],
      formView: [],
      formViewModel: []
    }
  },
  methods: {
    clearPicture () {
      this.form.pictureProperty = ''
    },
    handleSelectProperty (item) {
      console.log(this.form.list.propertyMap)
      if (this.form.list.propertyMap[item.name]) {
        this.form.list.propertyMap[item.name] = ''
        return
      }
      this.form.list.propertyMap[item.name] = item.desc
    },
    handleSelectEditProperty (item) {
      if (this.form.edit.propertyMap[item.name]) {
        this.form.edit.propertyMap[item.name] = ''
        this.form.edit.propertyFromMap[item.name] = ''
        return
      }
      this.form.edit.propertyMap[item.name] = item.desc
      this.form.edit.propertyFromMap[item.name] = 'text'
    },
    addMenu () {
      this.addedMenu.push(this.form.menu)
    },
    getTableList () {
      this.$httpf({ url: this.api.tableList }, data => {
        this.databaseTables = data.data.data.tables
      })
    },
    handleSelectTable () {
      const rows = this.databaseTables.filter(e => e.realTableName === this.form.tableName)[0].rows
      console.log(rows)
      this.tableData_list = this.databaseTables.filter(e => e.realTableName === this.form.tableName)[0].rows
    },
    handleAddMenuView () {
      const tableName = this.form.tableName
      const oneLevelMenu = this.form.oneLevelMenu
      const twoLevelMenu = this.form.twoLevelMenu
      if (!oneLevelMenu) {
        this.$error('请选择一级菜单')
        return
      }
      if (!twoLevelMenu) {
        this.$error('输入二级菜单')
        return
      }

      let pictureProperty = this.form.pictureProperty
      const json = {
        tableName: tableName,
        oneLevelMenu: oneLevelMenu,
        twoLevelMenu: twoLevelMenu,
        likeProperty: this.form.likeProperty,
        pictureProperty: pictureProperty || null,
        list: this.form.list,
        edit: this.form.edit,
        functions: {
          edit: this.editFunction,
          add: this.addFunction,
          delete: this.deleteFunction
        }
      }

      this.$httpf({ url: this.api.add, json: json, message: 1 })
    },
    freshView () {
      console.log(this.form)
      this.dialogTableVisible = true
      this.initTables()
      this.initTableData()
      this.initFormView()
      this.$forceUpdate()
    },
    initTableData () {
      let tables = this.tables
      let tmp = {}
      for (let i = 0; i < tables.length; i++) {
        tmp[tables[i].prop] = 'test数据'
      }
      this.tableData = []
      this.tableData.push(tmp)
      this.tableData.push(tmp)
    },
    initTables () {
      const renturunResule = []
      let properties = this.form.list.properties
      let propertyMap = this.form.list.propertyMap
      let pictureProperty = this.form.pictureProperty
      for (let i = 0; i < properties.length; i++) {
        let tmp = { label: propertyMap[properties[i]], prop: properties[i] }
        if (pictureProperty === properties[i]) {
          tmp['image'] = 1
        }
        renturunResule.push(tmp)
      }
      this.tables = renturunResule
    },
    initFormView () {
      const temp = {
        type: 'text',
        model: 'name',
        label: '商品名称',
        select: [
          { label: '正常', value: '正常' },
          { label: '异常', value: '异常' }
        ],
        rule: {
          message: '请输入商品名称'
        }
      }
      let properties = this.form.edit.properties
      let propertyFromMap = this.form.edit.propertyFromMap
      let propertyMessageMap = this.form.edit.propertyMessageMap
      let propertyMap = this.form.edit.propertyMap
      this.formView = []
      for (let i = 0; i < properties.length; i++) {
        temp.type = propertyFromMap[properties[i]]
        temp.rule.message = propertyMessageMap[properties[i]]
        temp.model = properties[i]
        temp.label = propertyMap[properties[i]]
        this.formView.push(JSON.parse(JSON.stringify(temp)))
      }
      console.log(this.formView)
    },
    initListMap (items) {
      const tmp = {}
      items.forEach(e => {
        tmp[e.name] = ''
      })
      this.form.edit.propertyFromMap = tmp
    },
    initEditMap (items) {
      const tmp = {}
      items.forEach(e => {
        tmp[e.name] = ''
      })
      this.form.edit.propertyFromMap = tmp
    },
    initForm () {
      const temp = {
        oneLevelMenu: '',
        twoLevelMenu: '',
        tableName: '',
        likeProperty: [],
        pictureProperty: '',
        list: {
          properties: [],
          propertyMap: {
            updateDate: '',
            insertDate: ''
          }
        },
        edit: {
          properties: [],
          // 必须输入的选项
          messageProperties: [],
          propertyMap: {
          },
          propertyFromMap: {
          },
          propertyMessageMap: {

          }
        }
      }
      const table = JSON.parse(sessionStorage.table)
      for (let i = 0; i < table.rows.length; i++) {
        temp.edit.propertyMap[table.rows[i].name] = ''
      }
      for (let i = 0; i < table.rows.length; i++) {
        temp.edit.propertyFromMap[table.rows[i].name] = ''
      }
      for (let i = 0; i < table.rows.length; i++) {
        temp.list.propertyMap[table.rows[i].name] = ''
      }
      for (let i = 0; i < table.rows.length; i++) {
        temp.edit.propertyMessageMap[table.rows[i].name] = ''
      }
      this.form = temp
    },
    // 当是否必须输入 选项卡被点击时候触发
    handleSelectMessageProperty (row) {
      if (this.form.edit.propertyFromMap[row.name].includes('file')) {
        this.form.edit.propertyMessageMap[row.name] = '请选择一个' + this.form.edit.propertyMap[row.name] + '文件'
      } else if (this.form.edit.propertyFromMap[row.name].includes('select')) {
        this.form.edit.propertyMessageMap[row.name] = '请选择一条' + this.form.edit.propertyMap[row.name] + '记录'
      } else {
        this.form.edit.propertyMessageMap[row.name] = '请输入' + this.form.edit.propertyMap[row.name]
      }
    },
    handleListOrder (name) {
      let number = this.form.list.properties.indexOf(name)
      if (number >= 0) {
        return number + 1
      }
      return ''
    },
    handleEditOrder (name) {
      let number = this.form.edit.properties.indexOf(name)
      if (number >= 0) {
        return number + 1
      }
      return ''
    },
    handleInputListOrder (name, event) {
      console.log(event)
      console.log(name)
    }

  },
  computed: {
    tableData_list_based () {
      let tmp = JSON.parse(JSON.stringify(this.tableData_list))
      if (tmp.length > 0) {
        console.log(tmp)
        tmp.push({ name: 'updateDate', desc: '更新时间' })
        tmp.push({ name: 'insertDate', desc: '插入时间' })
      }
      this.initEditMap(tmp)
      return tmp
    }
  },
  created () {
    this.getTableList()
    this.initForm()
    const table = JSON.parse(sessionStorage.table)
    console.log(this.form)
    this.form.tableName = table.realTableName
    this.tableData_list = table.rows
    console.log(this.form.edit.propertyFromMap)
    if (sessionStorage.twoLevelMenu) {
      this.addedMenu = JSON.parse(sessionStorage.twoLevelMenu)
    }
  },
  components: {
    'z-from': ZForm
  }
}
</script>

<style scoped>
  .content {
    padding: 20px 20px;
  }
  .form {
    margin: 10px;

    padding-top: 18px;
  }
  .table {
    padding: 10px;
  }
  .list {
    display: flex;
    width: 1200px;
    overflow: auto;
  }
  .list_ {
    flex: 1;
  }
  .list_1{
    flex: 1;
  }
  h1 {
    text-align: center;
    background: white;
  }
  .add {
    margin: 15px 0 0 0 ;
  }
  .list_view {
    margin-top: 10px;
  }
  .list_view_width {
    width: 80px;
  }

</style>
